<template>
	<n-drawer v-bind="$attrs" class="modal-container">
		<n-drawer-content :body-content-style="bodyContentStyle" :header-style="headerStyle" :footer-style="footerStyle" closable>
			<template #header >
				<span v-if="title">{{title}}</span>
				<slot v-else name="header"/>
			</template>
			<slot />
			<template #footer>
				<slot name="footer"/>
			</template>
		</n-drawer-content>
	</n-drawer>
</template>

<script setup lang="ts">
	import { defineProps } from 'vue'
	type drawerProps = {
		title : String | undefined,
		bodyContentStyle ?: Object,
		headerStyle?: Object,
		footerStyle?: Object
	}
	const props = withDefaults(defineProps<drawerProps>(), {
		title: '',
		bodyContentStyle: {
			padding: '10px'
		},
		headerStyle: {
			padding: '10px',
			backgroundColor: '#878787',
			color:'#fff'
		},
		footerStyle: {
			padding: '10px'
		}
	
	})
</script>
<style lang="scss">
	.modal-container {
		.n-drawer-header{
			.n-base-icon{
				color:#fff;
			}
		}
	}
</style>